<template>
  <view class="lookUsers">
    <view class="title">
      抄送{{ cList.length }}人
    </view>
    <view class="box">
      <view 
        v-for="(val,idx) in cList" 
        :key="idx" 
        class="avatar"
      >
        <block>
          <view class="imgs">
            <view class="i_box">
              <image 
                v-if="val.avatar" 
                class="photo" 
                :src="val.avatar" 
                mode="widthFix" 
              />
              <view 
                v-else 
                class="bg"
              >
                {{ val.name.slice(-2) }}
              </view>
              <!-- <image 
                class="btnImg"
                src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/del1.png"
                mode="widthFix"
                @click="del(idx)" 
              /> -->
            </view>
            <text class="name">
              {{ val.name }}
            </text>
          </view>
          <text 
            v-if="idx !== cList.length-1" 
            class="f"
          >
            +
          </text>
        </block>
      </view>
      <!-- <view 
        class="avatar1"
      >
        <view 
          class="imgs"
          @click="checkUser"
        >
          <image 
            class="photo1"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/check.png" 
            mode="widthFix"
          />
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				cList: this.$store.state.cList,
        cListimg: this.$store.state.cListimg
			};
		},
		onLoad() {
			console.log(this.$store.state.cList)
		},
    methods: {
      del(idx) {
        this.cList.splice(idx,1)
      },
      checkUser() {
      let title = '选择抄送人', that = this, maxUsers = 50
      dd.complexChoose({
        title, //标题
        multiple: true, //是否多选
        limitTips: '最大可选人数'+ maxUsers +'人', //超过限定人数返回提示
        maxUsers, //最大可选人数
        pickedUsers: [], //已选用户，值为userId列表
        disabledUsers: [], //不可选用户，值为userId列表
        disabledDepartments: [], //不可选部门id
        requiredUsers: [], //必选用户（不可取消选中状态）
        requiredDepartments: [], //必选部门（不可取消选中状态）
        permissionType: 'GLOBAL', //可添加权限校验，选人权限，目前只有GLOBAL这个参数
        responseUserOnly: false, //返回人，或者返回人和部门
        success: function (res) {
          console.log(res)
          that.getUserList(res)
        },
        fail: function (err) {},
      })
    },
    getUserList(data) {
      let departId = [];
      if(data.departments.length){
        uni.showLoading()
        for(let i in data.departments){
          departId.push(data.departments[i].id)
        }
        console.log(departId)
        this.$ajax({
          method: 'post',
          url: '/outing/mobile/exchange/queryByDepartId',
          data: {
            departId
          }
        }).then((res) => {
          if(res.data){
            let list = res.data
						console.log(list,data)
            list = list.concat(data.users)
						console.log(list)
            // eslint-disable-next-line no-undef
            this.cList = list
            if(list.length>2){
              this.cListimg=list.slice(0,1)
            }else{
              this.cListimg=list
            }
          }
          uni.hideLoading()
        })
      }else{
        // eslint-disable-next-line no-undef
        this.cList = data.users
        if(data.users.length>2){
          this.cListimg=data.users.slice(0,1)
        }else{
          this.cListimg=data.users
        }
      }
    },
    }
	}
</script>

<style lang="less" scoped>
	.lookUsers {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F9FB;
		padding: 39rpx 30rpx;
	}

	.title {
		line-height: 32rpx;
		font-size: 32rpx;
		color: #666;
	}

	.box {
		display: flex;
		flex-wrap: wrap;
    .avatar1{
      	display: flex;
			position: relative;
			align-items: center;
			color: #333;
			font-size: 20rpx;
			text-align: center;
			justify-content: center;
			width: 81rpx;
			margin-top: 40rpx;
      image{
        width: 81rpx;
        height: 81rpx;
      }
    }
		.avatar {
			display: flex;
			position: relative;
			align-items: center;
			color: #333;
			font-size: 20rpx;
			text-align: center;
			// justify-content: center;
			width: 138rpx;
			margin-top: 50rpx;

			.imgs {
				text-align: center;
			}

			.i_box {
				margin: 0 auto;
				position: relative;
			}

			.name {
				position: relative;
				top: 9rpx;
			}

			.bg {
				background-color: #FAE14D;
				width: 78rpx;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				font-size: 20rpx;
				color: #333;
				// margin: 0 auto;
				border-radius: 16rpx;
			}

			.photo {
				width: 78rpx;
				height: 78rpx;
				border-radius: 16rpx;
				display: block;
				margin: 0 auto;
			}
      .photo1{
        width: 78rpx;
				height: 78rpx;
				border-radius: 16rpx;
        display: block;
      }

			.btnImg {
				width: 31rpx;
				height: 31rpx;
				position: absolute;
				top: -12rpx;
				left: 70%;
			}

			.f {
        width: 100%;
        text-align: center;
				color: #999999;
			}
		}
	}
</style>
